<template>
  <div class="contain">
    <div :style="`width:${option.width};height:${option.height}`">
      <img @click="clickDice" class="dice" :src="dicesrc" alt="" />
    </div>
    <div
      class="player-box"
      :style="`width:${option.width}px;height:${option.height}px;`"
    >
      <div
        class="players"
        :style="`left:${mapData[item.address].x}px;top:${
          mapData[item.address].y
        }px;width:${option.itemData.item_width}px;height:${
          option.itemData.item_height
        }px；`"
        v-for="item in playerData"
        :key="item.id"
      >
        {{ item.name }}
      </div>
    </div>

    <canvas
      id="mycard"
      :width="option.width"
      :height="option.height"
      :style="option.style"
    >
    </canvas>

    <!-- <img src="@/assets/images/pic/001.jpeg" alt="" /> -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      dicesrc: require("@/assets/dice/1.jpg"),
      diceMoveIndex: 0,
      playerData: [
        {
          id: 0,
          name: "玩家1",
          avatar: "",
          gold: 1000,
          address: 0,
        },
        {
          id: 1,
          name: "玩家2",
          avatar: "",
          gold: 1000,
          address: 1,
        },
        {
          id: 2,
          name: "玩家3",
          avatar: "",
          gold: 1000,
          address: 3,
        },
        {
          id: 4,
          name: "玩家4",
          avatar: "",
          gold: 1000,
          address: 0,
        },
      ],
      /**地图数据
       * 每项是一格
       * id序号，从0开始
       * name名称
       * impactDesc效果描述文字
       * impactId效果序号
       */
      mapData: [
        {
          name: "起点",
          impactDesc: "经过得2000",
          impactId: 0,
        },
        {
          name: "洛阳",
          impactDesc: "这是洛阳",
          impactId: 1,
        },
        {
          name: "征兵处",
          impactDesc: "这是征兵处",
          impactId: 2,
        },
        {
          name: "酒馆",
          impactDesc: "这是酒馆",
          impactId: 3,
        },
      ],
      map_x: [],
      map_y: [],
      /**
       * 事件数据
       * id序号
       * type事件类型
       *
       */
      eventData: [
        {
          id: 0,
          type: "",
        },
      ],
      /**绘制地图参数
       * width 画布宽度
       * height 画布高度
       * x_num 横向格子数
       * y_num 纵向格子数
       * style 画布样式
       * itemData 单格绘制数据
       *    item_width: 50, 格子宽
       *    item_height: 50, 格子高
       * */
      option: {
        width: "1200",
        height: "500",
        x_num: 12,
        y_num: 5,
        // inner_width: "400",
        // inner_height: "400",
        style: "border: 1px solid #000000; margin-top: 20px",
        itemData: {
          //  margin_width: 2,
          item_width: 50,
          item_height: 50,
          player_width: 12.5,
          player_height: 20,
        },
      },
    };
  },
  components: {},
  methods: {
    drawGrid() {
      const canvas = document.getElementById("mycard");
      const ctx = canvas.getContext("2d");
      ctx.clearRect(0, 0, this.option.width, this.option.height);
      // 设置棋盘尺寸和格子大小
      const boardSize = this.option.width;
      const gridSize = this.option.itemData.item_width;
      // 绘制棋盘网格
      ctx.beginPath();
      ctx.strokeStyle = "#ccc"; // 网格线条颜色
      // 绘制横线和竖线
      for (let i = 0; i <= boardSize / gridSize; i++) {
        ctx.moveTo(i * gridSize, 0);
        ctx.lineTo(i * gridSize, boardSize);
        ctx.moveTo(0, i * gridSize);
        ctx.lineTo(boardSize, i * gridSize);
      }
      ctx.stroke(); // 绘制线条
      // 绘制棋盘的其他部分（如站点、道路等）
      // ... 这里可以添加更多绘制代码
    },
    drawMap() {
      var c = document.getElementById("mycard");
      var itemData = this.option.itemData;
      var option = this.option;
      var mapData = this.mapData;
      if (!c.getContext) return;
      var ctx = c.getContext("2d");
      var x = 0;
      var y = 0;
      ctx.fillStyle = "#ffffff";
      ctx.fillRect(
        itemData.item_width,
        itemData.item_height,
        option.inner_width,
        option.inner_height
      );
      /**序号取值（不包含尾部）
       * 上0~x_num-1
       * 右x_num-1~x_num+y_num-2
       * 下x_num+y_num-2~x_num+y_num+x_num-3
       * 左x_num+y_num+x_num-3~x_num+y_num+x_num+y_num-4
       */
      ctx.beginPath();
      ctx.fillStyle = "#000000";
      for (var i = 0; i < 2 * (option.x_num + option.y_num) - 4; i++) {
        var res = {};
        if (mapData[i]) {
          res = JSON.parse(JSON.stringify(mapData[i]));
        } else {
          res = {
            id: 999,
            name: "空地",
            impactDesc: "这是空地",
            impactId: 0,
            players: [0, 0, 0, 0],
          };
        }
        let { name, impactDesc } = res;
        //上
        if (i < option.x_num - 1) {
          x = i * itemData.item_width;
          y = 0;
        }
        // // 右
        else if (i < option.x_num + option.y_num - 2) {
          x = (option.x_num - 1) * itemData.item_width;
          y = (i - (option.x_num - 1)) * itemData.item_height;
        }
        // 下
        else if (i < option.x_num + option.y_num + option.x_num - 3) {
          x =
            (option.x_num - 1 - (i - option.x_num - option.y_num + 2)) *
            itemData.item_width;
          y =
            (option.x_num + option.y_num - 2 - (option.x_num - 1)) *
            itemData.item_height;
        }
        // 左
        else {
          x = 0;
          y =
            (i - (option.x_num + option.y_num + option.x_num - 3) + 1) *
            itemData.item_height;
        }
        //设置格子的坐标
        var _this = this;
        _this.mapData[i].x = x;
        _this.mapData[i].y = y;
        _this.map_x[i] = x;
        _this.map_y[i] = y;
        ctx.strokeStyle = "#000000";
        ctx.rect(x, y, itemData.item_width, itemData.item_height);
        ctx.stroke();
        // 文字
        ctx.textAlign = "center"; // 设置文本居中对齐
        ctx.font = "bold 20px Arial";
        ctx.fillText(name, x + 0.5 * option.itemData.item_width, y + 20);
        ctx.font = "10px Arial";
        ctx.fillText(impactDesc, x + 0.5 * option.itemData.item_width, y + 40);
        ctx.save();
      }
    },
    drawPlayer(address = 0) {
      console.log(this.mapData);
      console.log(address, 77777777);

      var c = document.getElementById("mycard");
      var itemData = this.option.itemData;
      var option = this.option;
      var mapData = this.mapData;
      var _this = this;
      console.log(_this.map_x[address], _this.map_y[address]);

      var i = this.diceMoveIndex;
      if (!c.getContext) return;
      var ctx = c.getContext("2d");
      // 绘制玩家棋子[0,1,2,3]
      if (_this.mapData[address].players[0] == 1) {
        //多人在一个的情况用索引排队
        var image0 = new Image();
        image0.forindex = 0;
        //清除旧棋子
        ctx.clearRect(
          2 +
            _this.playerData[0].player_x +
            itemData.player_width * image0.forindex,
          _this.playerData[0].player_y + 0.5 * itemData.item_height,
          itemData.player_width - 4,
          itemData.player_height
        );
        _this.playerData[0].player_x = _this.map_x[address];
        _this.playerData[0].player_y = _this.map_y[address];

        console.log(123456);
        image0.onload = () => {
          ctx.drawImage(
            image0,
            2 +
              _this.playerData[0].player_x +
              itemData.player_width * image0.forindex,
            _this.playerData[0].player_y + 0.5 * itemData.item_height,
            itemData.player_width - 4,
            itemData.player_height
          );
        };
        image0.src = require("@/assets/images/pic/001.jpeg");
      }
      if (_this.mapData[address].players[1] == 1) {
        var image1 = new Image();
        image1.forindex = 1;
        //清除旧棋子
        ctx.clearRect(
          2 + _this.playerData[1].player_x + itemData.player_width * 1,
          _this.playerData[1].player_y + 0.5 * itemData.item_height,
          itemData.player_width - 4,
          itemData.player_height
        );

        _this.playerData[1].player_x = _this.mapData[address].x;
        _this.playerData[1].player_y = _this.mapData[address].y;
        image1.onload = () => {
          ctx.drawImage(
            image1,
            2 +
              _this.playerData[1].player_x +
              itemData.player_width * image1.forindex,
            _this.playerData[1].player_y + 0.5 * itemData.item_height,
            itemData.player_width - 4,
            itemData.player_height
          );
        };
        image1.src = require("@/assets/images/pic/002.jpeg");
      }
      if (_this.mapData[address].players[2] == 1) {
        var image2 = new Image();
        image2.forindex = 2;
        //清除旧棋子
        ctx.clearRect(
          2 + _this.playerData[2].player_x + itemData.player_width * 2,
          _this.playerData[2].player_y + 0.5 * itemData.item_height,
          itemData.player_width - 4,
          itemData.player_height
        );
        _this.playerData[2].player_x = _this.mapData[address].x;
        _this.playerData[2].player_y = _this.mapData[address].y;
        image2.onload = () => {
          ctx.drawImage(
            image2,
            2 +
              _this.playerData[2].player_x +
              itemData.player_width * image2.forindex,
            _this.playerData[2].player_y + 0.5 * itemData.item_height,
            itemData.player_width - 4,
            itemData.player_height
          );
        };
        image2.src = require("@/assets/images/pic/003.jpeg");
      }
      if (_this.mapData[address].players[3] == 1) {
        var image3 = new Image();
        image3.forindex = 3;
        //清除旧棋子
        ctx.clearRect(
          2 + _this.playerData[3].player_x + itemData.player_width * 3,
          _this.playerData[3].player_y + 0.5 * itemData.item_height,
          itemData.player_width - 4,
          itemData.player_height
        );
        _this.playerData[3].player_x = _this.mapData[address].x;
        _this.playerData[3].player_y = _this.mapData[address].y;
        image3.onload = () => {
          ctx.drawImage(
            image3,
            2 +
              _this.playerData[3].player_x +
              itemData.player_width * image3.forindex,
            _this.playerData[3].player_y + 0.5 * itemData.item_height,
            itemData.player_width - 4,
            itemData.player_height
          );
        };
        image3.src = require("@/assets/images/pic/004.jpeg");
      }
    },
    setMapOption() {
      var option = JSON.parse(JSON.stringify(this.option));
      var itemData = this.option.itemData;
      // 格子大小
      this.option.itemData.item_width = option.width / option.x_num;
      this.option.itemData.item_height = option.height / option.y_num;
      this.option.inner_width =
        option.width - 2 * this.option.itemData.item_width;
      this.option.inner_height =
        option.height - 2 * this.option.itemData.item_height;
      // 棋子大小
      this.option.itemData.player_width = this.option.itemData.item_width / 4;
      this.option.itemData.player_height = this.option.itemData.item_height / 4;
      // 空地设置
      for (var i = 0; i < 2 * (option.x_num + option.y_num) - 4; i++) {
        if (!this.mapData[i]) {
          this.mapData[i] = {
            name: "空地",
            impactDesc: "这是空地",
            impactId: 0,
          };
        }
      }
      //坐标设置
      for (var i = 0; i < 2 * (option.x_num + option.y_num) - 4; i++) {
        var x = 0;
        var y = 0;
        //上
        if (i < option.x_num - 1) {
          x = i * itemData.item_width;
          y = 0;
        }
        // // 右
        else if (i < option.x_num + option.y_num - 2) {
          x = (option.x_num - 1) * itemData.item_width;
          y = (i - (option.x_num - 1)) * itemData.item_height;
        }
        // 下
        else if (i < option.x_num + option.y_num + option.x_num - 3) {
          x =
            (option.x_num - 1 - (i - option.x_num - option.y_num + 2)) *
            itemData.item_width;
          y =
            (option.x_num + option.y_num - 2 - (option.x_num - 1)) *
            itemData.item_height;
        }
        // 左
        else {
          x = 0;
          y =
            (i - (option.x_num + option.y_num + option.x_num - 3) + 1) *
            itemData.item_height;
        }
        //设置格子的坐标
        this.mapData[i].x = x;
        this.mapData[i].y = y;
        this.mapData[i].id = i;
      }
      console.log(this.mapData, "this.mapData");
    },
    setPlayer() {
      return;
      var new_player = {
        // id: 0,
        // name: "玩家1",
        gold: 1000,
        food: 1000,
        troops: 1000,
        address: 0,
        image: 1,
        player_x: 0,
        player_y: 0,
      };
      this.playerData = [];
      this.mapData[0].players = [0, 0, 0, 0];
      for (var i = 0; i < 4; i++) {
        this.playerData.push({
          ...new_player,
          id: i,
          name: `玩家${i + 1}`,
        });
        this.mapData[0].players = [1, 1, 1, 1];
      }
    },
    // 行动
    clickDice(e) {
      var num = 0;
      var res = 0;
      var diceTimer = setInterval(() => {
        if (num % 2) {
          this.dicesrc = require("@/assets/dice/s1.jpg");
        } else {
          this.dicesrc = require("@/assets/dice/s2.jpg");
        }
        num++;
        if (num > 15) {
          clearInterval(diceTimer);
          res = Math.ceil(Math.random() * 6);
          this.dicesrc = require(`@/assets/dice/${res}.jpg`);
          this.palyerMove(res);
        }
      }, 100);
    },
    // 移动
    palyerMove(step) {
      var index = this.diceMoveIndex;
      if (this.diceMoveIndex < 3) {
        this.diceMoveIndex++;
      } else {
        this.diceMoveIndex = 0;
      }
      var flag = 0;
      var tiemer = setInterval(() => {
        let { address, id } = this.playerData[index];
        // 旧地址去掉该玩家
        this.mapData[address].players[id] = 0;
        // 新地址增加该玩家
        this.mapData[address + 1].players[id] = 1;
        //更新玩家数据
        this.playerData[index].address = address + 1;
        //绘制棋子
        this.drawPlayer(address + 1);
        flag++;
        if (flag >= step) clearInterval(tiemer);
      }, 500);
    },
    /**游戏初始化*/
    startGame() {
      /**初始化棋盘数据
       */
      this.setMapOption();
      //初始化棋子
      this.setPlayer();
      //初始化骰子
      this.dicesrc = require(`@/assets/dice/1.jpg`);
      // 绘制
      this.drawGrid();
      this.drawMap();
      this.drawPlayer();
    },
  },
  watch: {},
  mounted() {
    this.startGame();
  },
};
</script>
<style scoped lang="less">
.contain {
  //   height: calc(~"100vh - 206px");
  //   background-image: linear-gradient(
  //     to left,
  //     #68fac2 50px,
  //     #ffdebe
  //   ); /* 自右向左 起始颜色在50px位置开始渐变 */
  canvas {
    // background-color: #000;
    // background-image: url();
  }
  .dice {
    width: 50px;
    height: 50px;
    margin-top: 20px;
  }
  .player-box {
    position: fixed;
    .players {
      position: absolute;
      z-index: 9999;
    }
  }
}
</style>
